<!DOCTYPE html>
<html>
<head>
    <title>新冠疫情最新动态</title>
    <meta charset="utf-8">
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <script src="/static/js/china.js"></script>
    <script src="/static/js/dataTool.js"></script>
</head>
<body>
<h1>盗版疫情实时追踪</h1>
<div id="report_area" style="width: 800px; height: 600px;"></div>

<script>
    let myChart = echarts.init(document.getElementById("report_area"));

    // myChart.showLoading();
    $.get('/static/js/les-miserables.gexf', function (xml) {
        myChart.hideLoading();

        var graph = echarts.dataTool.gexf.parse(xml);
        var categories = [];
        for (var i = 0; i < 9; i++) {
            categories[i] = {
                name: '类目' + i
            };
        }
        graph.nodes.forEach(function (node) {
            node.itemStyle = null;
            node.symbolSize = 10;
            node.value = node.symbolSize;
            node.category = node.attributes.modularity_class;
            // Use random x, y
            node.x = node.y = null;
            node.draggable = true;
        });
        option = {
            title: {
                text: 'Les Miserables',
                subtext: 'Default layout',
                top: 'bottom',
                left: 'right'
            },
            tooltip: {},
            legend: [{
                // selectedMode: 'single',
                data: categories.map(function (a) {
                    return a.name;
                })
            }],
            animation: false,
            series : [
                {
                    name: 'Les Miserables',
                    type: 'graph',
                    layout: 'force',
                    data: graph.nodes,
                    links: graph.links,
                    categories: categories,
                    roam: true,
                    label: {
                        position: 'right'
                    },
                    force: {
                        repulsion: 100
                    }
                }
            ]
        };

        myChart.setOption(option);
    }, 'xml');    
</script>
</body>
</html>